<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1 {
				height: 1000px;
				background-color: blue;
				margin: 50px;
			}
			/* 
				sticky：粘性定位
					当浏览页面不能滚动的时候，就在原来的位置不动。
					当页面滚动到该元素的位置以下，就会随着浏览器滚动
				position属性
					会将元素脱离普通文档流
			 */
			.div2 {
				position: absolute;
				background-color: red;
				top: 10px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2" style="height: 100px;z-index: 10;">
				我是固定在浏览的右边，差不多中间
			</div>
			<div class="div2" style="background-color: #00FFFF;">
				position，会带来一个z-index的问题。
				默认代码代号越大，z-index值越大，越在上面
			</div>
		</div>
		<!-- 
			在四个角落分别放一个宽高为100的div
		 -->
	</body>
</html>
